<template>
    <div class="app">
        <div class="p-2 border-bottom pb-0">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small " label-width="120px">
                <el-form-item label="姓名/手机号/证件号" label-width="140px">
                    <el-input v-model="formInline.user" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="多学员">
                    <el-input v-model="formInline.user" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="校区">
                    <el-select v-model="formInline.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="报名点">
                    <el-select v-model="formInline.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="招生部门">
                    <el-select v-model="formInline.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="申领类型" label-width="140px">
                    <el-select v-model="formInline.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="报名时间" label-width="120px">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="截止报名时间">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label=" " label-width="60px">
                    <el-button type="primary" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="mt-2 px-2">
            <el-tabs v-model="tabs" type="card" @tab-click="tabHande">
                <el-tab-pane :label="v.name" :name="v.label" v-for="(v, i) in tabList" :key="i"></el-tab-pane>
            </el-tabs>
        </div>

        <div class="px-2" style="height: 595px;">
            <el-table :data="tableData" border height="100%">
                <el-table-column prop="id" label="工单ID" width="80" align="center">
                </el-table-column>
                <el-table-column prop="pid" label="学员ID" width="150" align="center">
                </el-table-column>
                <el-table-column prop="nodeName" label="节点名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="firsttime" label="工单创建时间" width="260" align="center">
                </el-table-column>
                <el-table-column prop="status" label="工单进度" width="120" align="center">
                </el-table-column>
                <el-table-column prop="nextDealTime" label="下次处理时间" width="180" align="center">
                </el-table-column>

                <el-table-column prop="isDeal" label="是否处理" width="180" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.isDeal?'已处理':'未处理' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isDealTime" label="处理时间" align="center" width="180">
                </el-table-column>

                <el-table-column prop="isClosed" label="是否关闭" align="center" width="180">
                </el-table-column>
                <el-table-column prop="isClosedTime" label="关闭时间" align="center" width="180">
                </el-table-column>
                <el-table-column prop="ep" label="工单备注" align="center" width="180">
                </el-table-column>

                <el-table-column prop="line" label="行号" align="center" width="180">
                </el-table-column>
               
                <el-table-column prop="address" width="180" label="操作" align="center" fixed="right">
                    <el-button type="primary" plain size="mini">编辑</el-button>
                    <el-button type="danger" plain size="mini" class="el-icon-delete">删除</el-button>
                </el-table-column>
            </el-table>

        </div>
        <!-- 分页 -->
        <div class="pagin px-2">
            <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
                :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023年12月1日15:35:38 ChenRong
* @description   我的学员
**/

import { teacherAPI } from '@/api/adminstare'
export default {
    name: 'teachConfig',
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [],
            // 初始化参数
            initParams: {
                action: "myOrderList",
                page: 1,
                pageSize: 20,
                // isExactQuery: 0,
                sortStr: "id desc",
            },
            // 分页总条数
            total: 0,
            thisYear: '2023',//本年年份
            tabList: [
                { name: '今日待跟进', label: '0', state: 0 },
                { name: '超时未跟进', label: '1' },
                { name: '未来需跟进', label: '2' },
                { name: '已关闭', label: '3' },
                { name: '已完成', label: '4' },
            ],
            tabs: ''
        }
    },
    mounted() {
        this.getListData()

        this.getTabData()
    },
    methods: {
        async getListData() {
            const result = await teacherAPI(this.initParams)

            this.total = result.total
            this.tableData = result.data
        },
        // 当前显示的条数 发生改变时触发
        handleSizeChange(pageSize) {
            this.initParams.pageSize = pageSize || 20
            this.getListData()
        },
        // 当前页码发生改变时触发
        handleCurrentChange(page) {
            this.initParams.page = page || 1
            this.getListData()
        },

        async getTabData() {
            const { data } = await teacherAPI({ action: 'myOrdertStateList' })
            this.tabList[0].name += `(${data[0].sumcode_1})`
            this.tabList[1].name += `(${data[0].sumcode_2})`
            this.tabList[2].name += `(${data[0].sumcode_3})`
            this.tabList[3].name += `(${data[0].sumcode_4})`
            this.tabList[4].name += `(${data[0].sumcode_5})`
        },

        tabHande(tab) {
            console.log(tab.index);
        }
    }
}
</script>

<style lang="scss" scoped>
.app {
    background-color: white;
    width: 100%;
    height: 100%;
}

.pagin {
    align-items: center;
}
</style>